<{extend name="base" /}>
    <{block name="body" }>
        <style>html{font-size: 100px}</style>
        <div class="layui-body ">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class=""><a href="<{:url('admin/view/index')}>">已添加列表</a></li>
                    <li class="layui-this"><a href="<{:url('admin/view/create',['style_id'=>1])}>">样式一</a></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="app">
                        <div class="left">
                            <form class="layui-form" method="post" action="<{:url('admin/view/save')}>">
                                <input type="hidden" name="style" value="1">
                                <{php}>
                                if(request()->action() == 'edit'){
                                    echo '<input type="hidden" name="type" value="edit">';
                                    echo '<input type="hidden" name="id" value="'.request()->get('id').'">';
                                }
                                <{/php}>

                                <div class="group-item" >
                                    <div class="layui-form-item" >
                                        <label class="layui-form-label">医生头像</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="content[ico]" v-model="ico"   placeholder="医生头像建议100*100的图像"  lay-verify="required"   class="layui-input" >
                                        </div>
                                    </div>
                                </div>

                                <div class="group-item" >
                                    <div class="layui-form-item" >
                                        <label class="layui-form-label">客户头像</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="content[userico]" v-model="userico"   placeholder="客户头像建议100*100的图像"  lay-verify="required"   class="layui-input" >
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-row" v-for="(item,index) in bottomItem">
                                    <div class="layui-col-md12">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">对话</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[bottomItem][][title]" v-model='bottomItem[index].title' required lay-verify="required" placeholder="特色服务" class="layui-input">
                                                <button type="button" v-if="index == CbottomItem" @CLICK="addBottomItem" class="layui-btn">添加一句对话</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">最底部提示</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[tip]" v-model="tip"   placeholder="卫生部门认证 **市【妇科就医咨询中心】 正在输入文字..."  class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="right" id="baidu-search">

                        </div>
                    </div>
                </div>
            </div>
        </div>

<{/block}>
<{block name="script" }>
                <style type="text/css">
                    .left,
                    .right {
                        float: left;
                    }

                    .left {
                        width: 60%;
                    }

                    .right {
                        height: 550px;
                        margin-left: 60px;
                        width: 300px;
                        border: 2px solid #ccc;
                        border-radius: 20px;
                        padding: 20px;
                        background: #f1f1f1;
                        box-shadow: 1px 2px #eeeeee5c;
                    }
                    .group-item{
                        /*background: #f7f7f7;*/
                        padding: 10px 10px 10px 0;
                        border-radius: 5px;
                        margin: 10px 0;
                    }
                </style>
                <script src="/static/js/vue.js"></script>
                <script type="text/javascript">
                    var vue = new Vue({
                        el: "#app",
                        data: {
                            ico: '',
                            tip:'',
                            userico:'',
                            bottomItem:[
                                {
                                    title:'我是值班医生，有什么可以帮你的？请简单描述一下你的情况？',
                                },
                                {
                                    title:'您好？请讲！',
                                }
                            ]
                        },
                        computed: {
                            CbottomItem:function(){
                                return this.bottomItem.length - 1;
                            }
                        },
                        methods:{
                            addBottomItem:function(){
                                if (this.bottomItem.length >= 3 ) {
                                    layer.msg('最多添加三组');
                                    return;
                                }
                                this.bottomItem.push({
                                    title:'你好，这是一句新对话！',
                                });
                            }
                        }
                    });

                    <{php}>
                        if(request()->action() == 'edit'){
                            echo "vue.ico = '".$data['content']['ico']."';";
                            echo "vue.tip = '".$data['content']['tip']."';";
                            echo "vue.userico = '".$data['content']['userico']."';";

                            echo "vue.bottomItem = ".to_js_array_obj_baidu($data['content']['bottomItem']).";";

                        }
                    <{/php}>


                </script>
                <{/block}>
